import echarts from "echarts";
import zrender from "zrender";
import { animateRotate } from "./base";

const elements = {};

function draw(chart, percentage) {
  let gradient = new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
    { offset: 0, color: "rgba(5, 67, 136, 0.8)" },
    { offset: 1, color: "rgba(03, 142, 176, 0.8)" }
  ]);

  let zr = chart.getZr();
  let cx = zr.getWidth() / 2;
  let cy = zr.getHeight() / 2;

  let circle = new zrender.Circle({
    origin: [cx, cy],
    shape: {
      cx: cx,
      cy: cy,
      r: 50
    },
    style: {
      fill: gradient,
      fillOpacity: 0.5,
      stroke: "#009adb",
      lineWidth: 2,
      text: percentage + '%',
      fontSize: "20",
      textFill: "#009adb"
    },
    z: 1
  });

  let outerCircle = new zrender.Circle({
    origin: [cx, cy],
    shape: {
      cx: cx,
      cy: cy,
      r: 60
    },
    style: {
      fillOpacity: 0,
      stroke: "#009adb",
      strokeOpacity: 0.8,
      lineWidth: 2,
      lineDash: [4],
    },
    z: 0
  });

  zr.add(circle);
  zr.add(outerCircle);
  animateRotate(outerCircle);
  elements.circle = circle;
}

function update(percentage) {
  elements.circle.attr({
    style: {
      text: percentage + '%',
    }
  });
}



export default {
  draw,
  update
}
